
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<template>
  <div class="h100">
    <div>
      <van-cell-group>
        <van-field label="银行名称" v-model="form.bankName" placeholder="请输入银行名称"/>
      </van-cell-group>
      <van-cell-group>
        <van-field label="银行卡号" type="number" v-model="form.cardNo" placeholder="请输入银行卡号"/>
      </van-cell-group>
    </div>
    <div class="p20 mt20">
      <van-button
        :loading="botton.isLoginIng"
        loading-text="登录中..."
        class="mt20 b1 round"
        type="info"
        block
        :disabled="botton.loginState"
        @click="submit"
      >{{botton.loginState?"请输入银行卡信息":"确认提交"}}</van-button>
    </div>
  </div>
</template>

<script>
import { bankcard } from "@/http/api"
export default {
  data() {
    return {
      form: {
        bankName: null,
        cardNo: null
      },
      botton: {
        isLoginIng: false, //非加载中状态
        loginState: true //不可点击状态
      }
    };
  },
  watch: {
    form: {
      handler(newName) {
        if (newName.bankName && newName.cardNo) {
          this.botton.loginState = false;
        } else {
          this.botton.loginState = true;
        }
      },
      deep: true
    }
  },
  created(){},
  methods: {
    submit() {
      this.botton.isLoginIng = true
      this.botton.loginState = true
      bankcard(this.form).then((res)=>{
        if(res.code === 200){
          this.$router.push({
            path:"./bankcard"
          })
        }
        this.botton.isLoginIng = false
        this.botton.loginState = false
      })
    }
  }
};
</script>

